
<template>
    <div id="found">
   <div class="dr-production">
			
		
		<nav id="nav">
			<ul>
				<li class="act">音乐/门票</li>
				<li>金币商场</li>
			
			</ul>
		</nav>
		<!--内容部分HTML代码-->
		<div id="container">
			<div class="tab">
                <div id="po-seek">
                    <img src="static/img/fxyinyuemenpiaosousuo.PNG" alt="">
                </div>
                <div class="po-recommendations">
                 <p>知名制作人推荐</p>
                 
                 <img src="static/img/pozhizuorentj1.PNG" alt="">
                    <img src="static/img/pozhizuorentj2.PNG" alt="">
                 <img src="static/img/pozhizuorentj3.PNG" alt="">
                     <img src="static/img/pozhizuorentj4.PNG" alt="">
                      <img src="static/img/pozhizuorentj5.PNG" alt="">
                       <img src="static/img/pozhizuorentj6.PNG" alt="">
                          <img src="static/img/pozhizuorentj7.PNG" alt="">
                        <img src="static/img/pozhizuorentj8.PNG" alt="">
                       <img src="static/img/pozhizuorentj9.PNG" alt="">
                      <img src="static/img/pozhizuorentj10.PNG" alt="">
                </div>

                <div class="po-production">
                    <p>为你推荐作品</p>
                       
                 <img src="static/img/pozuopintuijian1.PNG" alt="">
                    <img src="static/img/pozuopintuijian2.PNG" alt="">
                       <img src="static/img/pozuopintuijian3.PNG" alt="">
                          <img src="static/img/pozuopintuijian4.PNG" alt="">
                             <img src="static/img/pozuopintuijian5.PNG" alt="">
                                <img src="static/img/pozuopintuijian6.PNG" alt="">
                  </div>

                  <div class="po-works">
             <p>最新作品</p>
 
  <img src="static/img/fxzuixinzuop1.PNG" alt="">
  <img src="static/img/fxzuixinzuop2.PNG" alt="">
  <img src="static/img/fxzuixinzuop3.PNG" alt="">
  <img src="static/img/fxzuixinzuop4.PNG" alt="">
  <img src="static/img/fxzuixinzuop5.PNG" alt="">
  <img src="static/img/fxzuixinzuop6.PNG" alt="">
  <img src="static/img/fxzuixinzuop7.PNG" alt="">
  <img src="static/img/fxzuixinzuop8.PNG" alt="">
  <img src="static/img/fxzuixinzuop9.PNG" alt="">
  <img src="static/img/fxzuixinzuop10.PNG" alt="">
  <img src="static/img/fxzuixinzuop11.PNG" alt="">
  
  

                  </div>

            </div>
			<div class="tab" id="store">
                <div class="st-grabble">  
        <img src="static/img/fxjinbishangchengsousuo.PNG" alt="" ></div>
        <div class="st-market">
  <img src="static/img/fxshangchengtupians.PNG" alt="" >
  <img src="static/img/fxshangchengtupiansx.PNG" alt="" >

       
        </div>
        <div class="st-market2">
  <img src="static/img/fxscpinpai.PNG" alt="" >
          <img src="static/img/fxscshangpin1.PNG" alt="" >
           <img src="static/img/fxscshangpin2.PNG" alt="" >
            <img src="static/img/fxscshangpin3.PNG" alt="" >
             <img src="static/img/fxscshangpin4.PNG" alt="" >

        </div>



            </div>
		</div>
		</div>
    </div>
</template>



<script>
			window.onload = function() {
				var nav = document.getElementById('nav');
				var oNav = nav.getElementsByTagName('li');
				var container = document.getElementById('container');
				var oDiv = container.getElementsByClassName('tab');
				for (var i = 0; i < oNav.length; i++) {
					oNav[i].index = i;
					oNav[i].onclick = function() {
						for (var i = 0; i < oNav.length; i++) {
							oNav[i].className = '';
							oDiv[i].style.display = "none";
						}
						this.className = 'act';
						oDiv[this.index].style.display = "block"
					}
					for (var m = 1; m < oNav.length; m++) {
						oNav[m].className = '';
						oDiv[m].style.display = "none";
					}
				}
			};
		</script>
<style lang="">
    #found{
        margin-top:-.5rem ;
    }

            .dr-production{
    background:#202020 ;
    margin: -.3rem;
    width: 100%;
    margin-left: .0rem;
}
nav ul{
    width: 100%;
    background: #2D2D2D;
    text-align: center;
    position: fixed;
        z-index: 2;
}
			nav li {
				display: inline-block;
				/* width: 24%; */
				text-decoration: none;
				/* margin-left: .5rem;
                margin-right: .5rem; */
                padding: 0 .9rem .3rem;
                
                color: #9D905C;
                font-size: .5rem;
               
			}
			.tab {
				height: 100%;
                background: #181818;
			}
            .act{
    border-bottom: 3px solid #9D905C;
            }

            #po-seek{
                width: 100%;
                height: 3.5rem;
                background: #2D2D2D;
                position: fixed;
                z-index: 1;

            }
            #po-seek img{
                width: 95%;
                margin-top: 2rem;
                margin-left: .3rem;
            }

            .po-recommendations{
                  padding-top: 4rem;
                  padding-left: .4rem;
            }
            .po-recommendations p{
                color: #929292;
                font-size: .4rem;
               margin-bottom: .3rem;
            }
               .po-recommendations img{
                   width: 17%;
               }
               .po-production{
                padding-left: .4rem;
                margin-top: .3rem;
               }
                 .po-production p{
                color: #929292;
                font-size: .4rem;
               margin-bottom: .5rem;
            }
              .po-production img{
                   width: 30%;
               }
            .po-works{
                   padding-bottom:1rem ;
              
            }
              .po-works p{
                  padding-top:.4rem;
                  padding-left: .4rem;
                color: #929292;
                font-size: .4rem;
               margin-bottom: .3rem;
            }
                 .po-works img{
                 width: 100%;
              
            }
/* 金币商场页面 */
    #store{
            padding-bottom:1rem ;

        }
        .st-grabble{
            width: 100%;
            height: 2.8rem;
        }
        .st-grabble img{
            margin-top: 1.7rem;
            width: 95%;
            margin-left: .3rem;
        }
        .st-market img{
            display: inline-block;
            width: 100%;
        }
        .st-market img:nth-child(2){
            margin-top: -.3rem;
        }   
          .st-market2 img{
            margin-left: .5rem;
            width: 90%;
        }



        </style> 
